'use client'
import React from "react";
import {Swiper, SwiperSlide} from 'swiper/react';
import 'swiper/css';

import SlidePrevButton from './SlidePrevButton'
import {IImgList} from "@/app/components/Content/Recommend/common";


const Recommend = () => {
  const [imgList] = React.useState<IImgList[]>([
    {
      img: '/images/recommend/1.jpg',
      slogan: '你见过山海经吗',
      logo: '/images/footer/3.png'
    },
    {
      img: '/images/recommend/2.jpg',
      slogan: '一位粉丝想看到自己奔跑的样子',
      logo: '/images/footer/3.png'
    },
    {
      img: '/images/recommend/3.jpg',
      slogan: '我们发射了一颗卫星',
      logo: '/images/footer/3.png'
    },
    {
      img: '/images/recommend/4.jpg',
      slogan: '创业故事2.0',
      logo: '/images/footer/3.png'
    },
    {
      img: '/images/recommend/5.jpg',
      slogan: '花200个小时去美国追龙卷风，我们拍到了……',
      logo: '/images/footer/2.png'
    },
    {
      img: '/images/recommend/6.jpg',
      slogan: '耗时2个月辗转10个机场，我们终于拍到了！',
      logo: '/images/footer/3.png'
    }

  ]);
  return <div className="mb-12">
    <header className="px-4 flex justify-between items-center  my-12">
      <div className="text-center w-full">
        <p className="md:text-sm lg:text-xl  text-[#646464] font-[600]">RECOMMEND</p>
        <p className="text-[#24252C] font-[600] text-2xl">也许你喜欢</p>
      </div>
    </header>

    <Swiper
      loop={true}
      slidesPerView={2}
      spaceBetween={30}
      centeredSlides={true}
    >
      {
        imgList.map((item, i) => {
          return <SwiperSlide key={i}>
            <SlidePrevButton img={item.img} slogan={item.slogan} logo={item.logo}/>
          </SwiperSlide>
        })
      }

    </Swiper>
  </div>
}

export default Recommend